/* 在模态框显示时添加渐变效果 */
.modal {
    display: none; /* 默认不显示 */
    position: fixed;
    z-index: 1000; /* 提高层级确保在最上层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* 黑色半透明背景 */
    animation: fadeIn 0.5s; /* 添加淡入效果 */
}

/* 设置设置项的容器，使用flex布局对齐 */
.setting-item {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-bottom: 15px; /* 设置一些底部外边距 */
}

/* 调整label的宽度和对齐方式 */
.setting-item label {
    flex-shrink: 0; /* 防止标签缩小 */
    width: 120px; /* 设置一个固定宽度，以便所有标签对齐 */
    margin-right: 10px; /* 在标签和下拉框之间设置一些间距 */
    text-align: right; /* 文本右对齐 */
}

/* 统一select元素的样式 */
.setting-item select {
    flex-grow: 1; /* select元素会占据剩余空间 */
    padding: 8px 10px; /* 增加内边距以提供更好的点击区域 */
    font-size: 16px; /* 可适当调整字体大小 */
    border-radius: 4px; /* 统一圆角 */
    border: 1px solid #ccc; /* 统一边框 */
    background-color: white; /* 背景色 */
}

/* 确保按钮与下拉框底部对齐 */
#confirmButton {
    align-self: flex-end; /* 对齐到容器的底部 */
    width: 100%; /* 让按钮宽度与容器相同 */
    box-sizing: border-box; /* 防止内边距影响宽度 */
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 调整为屏幕顶端5%的位置 */
    padding: 20px;
    border-radius: 5px; /* 添加圆角边框 */
    width: 80%; /* 调整宽度为80% */
    max-width: 600px; /* 最大宽度为600px */
    animation: slideIn 0.5s; /* 添加滑动效果 */
}

@keyframes slideIn {
    from {top: -300px; opacity: 0;}
    to {top: 5%; opacity: 1;}
}

/* 模态框关闭按钮样式 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer; /* 添加这行代码 */
}

/* 增强按钮的视觉效果 */
button {
    background-color: #4CAF50; /* 绿色背景 */
    color: white;
    padding: 10px 20px;
    margin: 10px 0;
    border: none;
    cursor: pointer;
    border-radius: 4px; /* 圆角边框 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */
}

button:hover {
    background-color: #45a049; /* 深绿色背景 */
}

/* 下拉框样式 */
#page-size {
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 4px; /* 圆角 */
    border: 1px solid #ccc; /* 边框颜色 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 内阴影 */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 过渡效果 */
}

/* 当下拉框获取焦点时的样式 */
#page-size:focus {
    outline: none; /* 移除焦点轮廓 */
    border-color: #4CAF50; /* 边框颜色变为主题色 */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.4); /* 外阴影效果 */
}

/* 下拉选项的样式 */
#page-size option {
    padding: 5px;
    font-size: 16px;
}

.custom-alert {
    display: none; /* 默认不显示 */
    position: fixed; /* 固定位置 */
    top: 50%; /* 顶部50%的位置 */
    left: 50%; /* 左边50%的位置 */
    transform: translate(-50%, -50%); /* 向上和向左各偏移50%自身尺寸，实现居中 */
    z-index: 10000; /* 确保在最上面 */
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
    text-align: center; /* 文本居中 */
    cursor: pointer; /* 点击即关闭 */
    min-width: 200px; /* 最小宽度 */
}

.custom-alert.success {
    background-color: #28a745; /* 绿色背景表示成功 */
}

.custom-alert.error {
    background-color: #dc3545; /* 红色背景表示错误 */
}
